<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>:: CodeThatXPBar - navigation control that provides with the same look, feel and functionality as the special control bar which can be found in Windows Explorer, Control panel and other system tools of the WindowsXP ::</title>
<meta http-equiv="content-language" content=en>
<meta name=robots content="INDEX, FOLLOW">
<meta http-equiv=keywords content="CodeThatXPBar, script, bar, XP bar, javascript, javascript XP bar, free, free javascript XP bar, cross-browser, html, xml, css, control panel, Windows XP, explorer">
<meta http-equiv=description content="CodeThatXPBar is a navigation control that provides with the same look, feel and functionality as the special control bar which can be found in Windows Explorer, Control panel and other system tools of the WindowsXP">
<meta http-equiv=expires content="Mon, 01 Jan 1990 00:00:00 GMT">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv=pragma content="no-cache">
<meta name="revisit-after" content="1 day">
<meta http-equiv="content-script-type" content="text/javascript">
<link rel=stylesheet type="text/css" href="s.css">

<script language=javascript src="own.js"></script></head>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 bgcolor=#FFFFFF>
<table width=768 border=0 cellpadding=0 cellspacing=0>
<tr>
<td><div style="position:absolute;left:320;top:154;z-index:1"><img src="img/mm.gif" width=2 height=10></div><img src="img/s.gif" width=1 height=2></td>
</tr><tr>
<td class=ct13><table width=768 height=42 border=0 cellpadding=0 cellspacing=0>
	<tr>
	<td><img src="img/s.gif" width=20 height=1></td>
	<td valign=middle><p class=cp18><nobr><font class=ca8>User Manual <br><a href="../index.html" class="ca9"><font class="cf6">S</font>amples</a></font></nobr></p></td>
	<td width=13%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><a class=ca9 href="index.html"><font class=cf6>In</font>troduction</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_style.html"><font class=cf6>S</font>tyle customize</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_pos.html"><font class=cf6>B</font>ar position</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_act.html"><font class=cf6>It</font>ems' actions</a></nobr></p>
	<p class=cp18><nobr><a class=ca9 href="bar_html.html"><font class=cf6>H</font>TML code as items' text</a>&nbsp; &nbsp;
	
	<a class=ca9 href="bar_db.html"><font class=cf6>X</font>PBar from the database</a></nobr></p>
	
	<p class=cp18><nobr><a class=ca9 href="bar_beh.html"><font class=cf6>C</font>hange XPBar Behaviour</a>&nbsp; &nbsp;
	<a class=ca9 href="standard_vs_pro.html?h=xpbar#xpbar"><font class=cf6>S</font>tandard vs PRO</a></nobr></p></td>
	<td width=23%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><font class=ca8>On-line Builder</font></nobr></p></td>
	<td width=13%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle>
	
	<p class=cp18><a class=ca9 href="http://codethat.com/xpbar/ctxpbarpro_builder.html">PRO</a></p>

	
	<p class=cp18><a class=ca9 href="../Builder/ctxpbarstd_builder.html">STD</a></p>
	
	</td>
	<td width=23%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><a class=ca8 href="userguide.html"><font class=cf7>1</font>23Guide</a>&nbsp; &nbsp;

	
	<p class=cp18><nobr><a class=ca8 href="http://codethat.com/sales.html"><font class=cf7>O</font>rder PRO Now</a>&nbsp; &nbsp;

	
	<a class=ca8 href="faq.html"><font class=cf7>F</font>AQ</a></nobr></p></td>
	<td width=28%><img src="img/s.gif" width=1 height=1></td>
	</tr>
</table></td>
</tr><tr>
<td><img src="img/s.gif" width=1 height=2></td>
</tr>
<tr>
<td class=ct12><table width=768 height=30 border=0 cellpadding=0 cellspacing=0>
	<tr><td valign=middle><h1 class=cp9>CODETHATXPBAR USER MANUAL</h1></td></tr>
</table></td>
</tr><tr>
<td>

<h1 class=cp10><font class=cf5>XPBar Items Actions</font></h1>
<p class=cp10>With CodeThatXPBar you can customize an action that will be performed after item click event. It may be:</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7>execution of JS code</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7>jump to URL (you should select an url, link target and item hint)</p>
<p class=cp19><img src="img/ad.gif" width=11 height=7>JS code to execute when item is switched on/off (for boolean items only)</p>
<p class=cp10>Whole bar's item area is clickable.</p>
<p class=cp10>Remember item's structure:</p>

<pre class=cc1>
<font class=cc6>"items"</font> <font class=cc2>:</font> <font class=cc8>[</font>
<font class=cc7>{</font>
	<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>" "</font><font class=cc2>,</font> 	 // text to be written inside
	<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font> 	 // item style in normal state
	<font class=cc6>"styleover"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font> // item style in "mouse over" state
	<font class=cc6>"styleon"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font> // for bool items specifies the style when in "on" state
	<font class=cc6>"menu"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font> 	 // submenu
	<font class=cc6>"action"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"position"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"type"</font> <font class=cc2>:</font> <font class=cc6>" "</font>	 // special item type ("bool"/"separator"),
	// for hierarchical menu only
<font class=cc7>}</font> <font class=cc8>]</font>
</pre>

<p class=cp10>To describe a click action use "action" property:</p>

<pre class=cc1>
<font class=cc6>"action"</font> <font class=cc2>:</font> <font class=cc7>{</font>
	<font class=cc6>"js"</font> <font class=cc2>:</font> <font class=cc6>" "</font> // JS code
	<font class=cc6>"url"</font> <font class=cc2>:</font> <font class=cc6>" "</font> // go to URL
	<font class=cc6>"target"</font> <font class=cc2>:</font> <font class=cc6>" "</font> // link target
	<font class=cc6>"title"</font> <font class=cc2>:</font> <font class=cc6>" "</font> // item hint
	<font class=cc6>"on"</font> <font class=cc2>:</font> <font class=cc6>" "</font> // JS code to evaluate when item is switched to on
	<font class=cc6>"off"</font> <font class=cc2>:</font> <font class=cc6>" "</font> // JS code to evaluate when item is switched to off
<font class=cc7>}</font>
</pre>

<h2 class=cp10><font class=cf4>Example - XPBar Items Actions</font></h2>
<p class=cp10>You can see an example and complete code here - <a class=ca5 href="act_ex.html" onclick="return openWin(800,550,'act_ex.html')" target=_blank>XPBar Items Actions Example</a></p>
<p class=cp10><a class=ca7 href="bar_html.html">Read more about CodeThatXPBar&nbsp;&gt;&gt;</a></p>

</td>
</tr>
<tr>
<td><p class=cp8>&copy; <a class=ca2 href="">CodeThat.com</a>, 2003-2005<br>
Design by <a class=ca2 href="http://www.xt-labs.com">XTLabs, Inc</a>.</p></td>
</tr>
</table></body></html>